<template>
  <view
    class="kui-tabbar"
    :style="{
      height: height + 'rpx',
      backgroundColor: props.blur ? '' : 'white',
      boxShadow: `0 -10rpx 16rpx #e1e1e1`,
      paddingBottom: safeAreabottom + 'px',
      backdropFilter: props.blur ? 'blur(10px)' : '',
      WebkitBackdropFilter: props.blur ? 'blur(10px)' : '',
    }"
  >
    <!-- 
	暗黑模式有兼容问题，暂不使用
	backgroundColor: theme.tabBgColor || 'white',
	boxShadow: `0 -10rpx 16rpx ${theme.tabBorderStyle || '#e1e1e1'}`, 
	-->
    <view
      class="kui-tabbar__item"
      v-for="(item, index) in tabbar"
      :key="index"
      @tap="changeTab(item)"
    >
      <view class="kui-msg-count" v-if="item.count">{{ item.count }}</view>
      <view class="kui-tabbar__bd">
        <view class="kui-tabbar__icon" v-if="item.iconType == 'font'">
          <text
            class="meunfont meunfont-tabbar"
            :class="[
              item.whether ? item.selectedIconPath : item.iconPath,
              item.whether ? 'active' : '',
            ]"
            :style="{
              fontSize: item.iconSize || 50 + 'rpx',
              lineHeight: item.iconSize || 50 + 'rpx',
              color: item.whether
                ? item.selectedIconColor || 'var(--kui-color-theme)'
                : 'lightgray',
            }"
          ></text>
        </view>
        <view class="kui-tabbar__icon" v-else>
          <image
            class="king-icon-img-m"
            :src="item.selectedIconPath"
            v-if="item.whether"
          ></image>
          <image class="king-icon-img-m" :src="item.iconPath" v-else></image>
        </view>
      </view>
      <view
        class="kui-tabbar__label"
        :class="{ active: item.whether }"
        :style="{
          color: item.whether
            ? item.selectedIconColor || 'var(--kui-color-theme)'
            : 'lightgray',
        }"
        >{{ item.text }}</view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch, onMounted, onUnmounted } from "vue";
// import { useStore } from "vuex";
// const store = useStore();
// 计算属性
// const theme = computed(() => store.state.common.theme);

// props
const props = defineProps({
  pageData: {
    type: Array<TabbarBase>,
    default: function () {
      return [];
    },
  },
  nowHeader: {
    type: String,
    default: "",
  },
  // 毛玻璃效果
  blur: {
    type: Boolean,
    default: false,
  },
});

type Tabbars = Array<TabbarBase>;

interface TabbarBase {
  customNavigation: boolean;
  pagePathName: string;
  pagePath: string;
  text: string;
  iconPath: string; // 图标路径 或 字体图标calss
  selectedIconPath: string;
  iconType: "font" | "image";
  whether: boolean;
  selectedIconColor?: string;
  iconSize: number; // rpx
}

const tabbar = reactive<Tabbars>([]);

const height = ref(120);
// 底部安全区域
const safeAreabottom = ref(0);
uni.getSystemInfo({
  success(result) {
    safeAreabottom.value = result.safeAreaInsets?.bottom || 0;
    height.value = safeAreabottom.value + height.value;
  },
});

const loadList = (val: Tabbars | [] = []) => {
  tabbar.splice(0, tabbar.length, ...val);
};

// watch
watch(
  () => props.pageData,
  (val: Tabbars) => {
    // console.log("[common-tabbar]:pageData -- update --> tabbar", val);
    loadList(val);
  },
  { immediate: true, deep: true }
);

watch(
  () => props.nowHeader,
  (v) => {
    // console.log("[common-tabbar]:nowHeader -- update --> tabbar", v);
    if (tabbar.length > 0) {
      tabbar.splice(
        0,
        tabbar.length,
        ...tabbar.map((val) => {
          if (val.pagePathName == v) val.whether = true;
          else val.whether = false;
          return val;
        })
      );
    }
  },
  { immediate: true, deep: true }
);

// 事件
const emits = defineEmits(["changeTab"]);

const changeTab = (item: TabbarBase) => {
  // console.log("tab switch:", item);
  // tabbar.splice(0, tabbar.length, ...val);
  tabbar.map((val) => {
    if (val.pagePathName == item.pagePathName) val.whether = true;
    else val.whether = false;
    return val;
  });
  emits("changeTab", item);
};

// 方法

/**
 * 更新消息数量
 * @param tabbarPagePathName tabar唯一名称
 * @param count
 */
const setMsgCount = (tabbarPagePathName: string, count: number) => {
  tabbar.map((v) => {
    if (v.pagePathName == tabbarPagePathName) v.count = count;
  });
};

defineExpose({
  setMsgCount,
});

// 全局事件
onMounted(() => {
  uni.$on("tabbar:setMsgCount", ({ name, count }) => {
    setMsgCount(name, count);
  });
});

onUnmounted(() => {
  uni.$off("tabbar:setMsgCount");
});
</script>

<style lang="scss" scoped>
.kui-tabbar {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 120rpx;
  padding: 14rpx 0;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;

  .kui-tabbar__item {
    display: block;
    line-height: 24rpx;
    font-size: 20rpx;
    text-align: center;
    width: 25%;
    position: relative;
  }

  .kui-msg-count {
    position: absolute;
    right: 20rpx;
    top: 0;
    background-color: red;
    padding: 4rpx 10rpx;
    color: white;
    font-weight: bold;
    border-radius: 999rem;
  }

  .kui-tabbar__icon {
    font-family: "Font Awesome 6 Pro", sans-serif;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }

  .meunfont-tabbar {
    color: lightgrey;
    transition: 0.5s;

    &.active {
      text-shadow: 10rpx 10rpx 20rpx var(--kui-color-theme-light);
    }
  }

  .kui-tabbar__label {
    line-height: 30rpx;
    font-size: 28rpx;
    color: #6b7374;

    &.active {
      color: var(--kui-color-theme) !important;
    }
  }

  .king-icon-img-m {
    height: 50rpx;
    width: 50rpx;
  }
}
</style>
